import { useState, useEffect } from 'react'
import axios from 'axios'
import Banner from './components/banner'
import List from './components/list'
import Footer from './components/footer'
import { parseJsonByString } from '../../../common/utils'

const map = {
  banner: Banner,
  list: List,
  footer: Footer
}

const render = (item, index) => {
  const Comp = map[item.name]
  return Comp ? <Comp key={index} schema={item} /> : null
}

const Home = () => {
  const [pageSchema, setPageSchema] = useState([])
  const { children = [], attributes = {} } = pageSchema

  useEffect(async () => {
    const res = await axios.get('/api/schema/getLatestOne')
    console.log(res)
    const data = res.data?.data
    if (data) {
      setPageSchema(parseJsonByString(data.schema, {}))
    }
  }, [])

  return <div>{children.map((item, index) => render(item, index))}</div>
}

export default Home
